<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html lang="en" xmlns="">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>某某国际物流有限公司</title>
    <!-- 网页的图标 -->
    <link rel="icon" href="image/favicon.ico">
    <link rel="stylesheet" href="/css/1.css" />
</head>
<body>
<!--头部开始-->
<div class="header">
    <div class="wrap">
        <ul class="header-left">
            <li>欢迎来到某某国际物流公司!&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</li>
            <li><a href="javascript:void(0)" onclick = "document.getElementById('login1').style.display='block';">登录</a><span>|</span></li>
            <div id="login1" class="white_content1">
                <a style="position: absolute;right: 20px;" ;href = "javascript:void(0)" onclick = "document.getElementById('login1').style.display='none';">关闭</a>
                <from action="/page1" class="login" method="post">
                    <p>login</p>
                    <input type="hidden" name="type" value="login">
                    <input type="text" placeholder="账号" name="account">
                    <input type="password" placeholder="密码" name="password">
                    <input type="submit" class="btn" value="登录">
                </from>
            </div>
            <li><a href="javascript:void(0)" onclick = "document.getElementById('register1').style.display='block';">注册</a></li>
            <div id="register1" class="white_content2">
                <a style="position: absolute;right: 20px;" ;href = "javascript:void(0)" onclick = "document.getElementById('register1').style.display='none';">关闭</a>
                <from action="/page1" class="register" method="post">
                    <p>register</p>
                    <input type="hidden" name="type" value="register">
                    <input type="text" placeholder="账号" name="account">
                    <input type="password" placeholder="密码" name="password">
                    <input type="text" placeholder="用户名" name="name">
                    <input type="text" placeholder="性别" name="gender">
                    <p><input type="hidden" name="admin" value="false"></p>

                    <input type="button" class="btn" value="注 册">
                </from>
            </div>
        </ul>
        <ul class="header-right">
            <li><img src="image/psdy.png" width="18px">24小时热线:400-1234-XXXX&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</li>
            <li><a href="#">设为首页</a><span>|</span></li>
            <li><a href="#">加入收藏</a></li>
        </ul>
    </div>
</div>
<!--头部结束-->
<!--导航开始-->
<div class="nav">
    <div class="wrap">
        <div class="logo">
            <img src="image/5ay2.png">
        </div>
        <div class="brand">
            <ul>
                <li>某某国际物流有限公司</li>
                <li style="font-size: 10px;">MARINE LOGISTICS CO LTD</li>
            </ul>
        </div>
        <div class="nav-bar">
            <ul>
                <li><a href="/page1">首页</a></li>
                <li><a href="/page2">关于我们</a></li>
                <li><a href="/page3">业务范围</a></li>
                <li><a href="/page6">新闻中心</a></li>
                <li><a href="/page8">网上下单</a></li>
                <li><a href="/page11">联系我们</a></li>
            </ul>
        </div>
    </div>
</div>
<!--导航结束-->
<div class="demo01">
    <div class="banner-container">
        <ul class="banner-list">

            <li class="active">

                <img src="${firstImages.get(0).img}">
            </li>

            <c:forEach items="${firstImages}" var="firstImage">
                <c:if test="${firstImage!=firstImages.get(0)}">
                    <li>
                        <img src="${firstImage.img}">
                    </li>
                </c:if>
            </c:forEach>
        </ul>
            <ul class="point-list">
                <li class="active"></li>
                <li></li>
                <li></li>
          <script>
                var pointList = document.querySelectorAll(".point-list li");
                var bannerList = document.querySelectorAll(".banner-list li");

                for (var i = 0; i < pointList.length; i++){
                    pointList[i].index = i;
                    pointList[i].onmouseenter = function(){

                        for (var j = 0; j < bannerList.length; j++){
                            bannerList[j].classList.remove("active");
                        }

                        bannerList[this.index].classList.add("active");

                        for (var j = 0; j < pointList.length; j++){
                            pointList[j].classList.remove("active");
                        }

                        pointList[this.index].classList.add("active");

                    }
                }
            </script>
        </ul>
    </div>
    <div style="position: absolute;top: 400px;left: 475px;">
        <p style="color: #ffffff; font-family: 微软雅黑;line-height:200%;font-size: 50px;text-align: center;">提供全球货物运输代理服务</p>
        <p style="color: #ffffff; font-family: 宋体; font-size: 16px; line-height: 200%;text-align: center;">我们可以提供较具竞争力的价格和较好的运输方式</p>
        <p style="color: #ffffff; font-family: 宋体; font-size: 12px; line-height: 200%;text-align: center;">WE CAN OFFER THE MOST COMPETITIVE RATES AND BEST TRANSPORTATION OPTIONS</p>
        <a href="/page3" style="width: 150px;height: 50px;background-color: #bb2222;display: block;margin-left: 200px;margin-top: 20px;text-decoration: none">
            <span style="color: white;position: relative;top: 15px;left: 36px">我们的业务</span></a>
    </div>
</div>

<div class="demo02">
    <p style="text-align: center;font-family: 微软雅黑; font-size: 28px; color: #222222; line-height: 200%;padding-top: 30px">全球运输服务</p>
    <p style="text-align: center;font-family: 微软雅黑; font-size: 12px; color: #999999; line-height: 200%;">我们在中国华南地区是一家国际货物运输代理有限公司，拥有二十多年的货物运输代理经验</p>

    <c:forEach items="${businessClasses}" var="businessClass" end="3">
        <div class="day1" style="float: left;height: 374px; width: 25%;margin-top: 30px;">
            <img style="padding-left: 83.5px;padding-top: 40px;" src="${businessClass.img}">
            <p style="text-align:center;font-size:18px;color:#bb2222;font-family: 微软雅黑;line-height: 200%">${businessClass.name}</p>
            <p style="text-align:center;font-size:13px;color:#999999;font-family: 微软雅黑;line-height: 200%;padding-left: 25px;padding-right: 25px">${businessClass.desc}</p>
        </div>
    </c:forEach>
</div>

<div class="demo03">

    <div class="day5" style="float: left;height: 350px; width: 50%;background-color: #D9D9D9;">
        <p  style="text-align: center;font-size:32px;color:#1A1A1A;font-family: 微软雅黑;line-height: 200%;padding-top:40px;">关于某某国际物流</p>
        <p  style="text-align: center;font-size:16px;color:#434343;font-family: 微软雅黑;line-height: 200%;">About us</p>
        <p  style="text-align: center;font-size:13px;color:#434343;font-family: 微软雅黑;line-height: 200%;padding-left: 50px;padding-right: 50px">我们在中国华南地区是一家国际货物运输代理有限公司，拥有二十多年的货物运输代理经验，同时在世界各地拥有发达的代理网络，凭借我们不懈的努力已拥有多项荣誉资质，公司员工均通过正式培训上岗且拥有着丰富的工作经验，能非常娴熟的为您解决华南地区海运空运快递报关仓储等物流体系的一系列工作任务</p>
        <a href="/page2" style="width: 150px;height: 50px;background-color: #bb2222;display: block;margin-left: 310px;margin-top: 20px;text-decoration: none">
            <span style="color: white;position: relative;top: 15px;left: 43px">关于我们</span></a>
    </div>
    <div class="day6" style="float: left;height: 350px; width: 50%;background-color: #D9D9D9;background-image: url(/image/map.png)">
    </div>
</div>

<div class="demo04">
    <p style="text-align: center;font-family: 微软雅黑;font-size: 28px; color: #222222; line-height: 200%;padding-top: 30px;">业务范围</p>
    <p style="text-align: center;font-family: 微软雅黑;font-size: 12px; color: #999999; line-height: 200%;">业务范围涉及国际贸易、海外工程、防务电子、船舶业务、招标业务、展览广告及现代物流等多个领域</p>
    <c:forEach items="${businesses}" var="business" end="5">
        <div class="day7" style="float: left;height: 323px; width: 33.333%;">
            <img style="padding-left: 51px;padding-top: 30px;" src="${business.img}" height="200" width="400;">
            <p style="font-family: 微软雅黑;font-size: 16px;color: #434343;padding-left: 200px;padding-top: 30px;">${business.name}</p>
        </div>
    </c:forEach>

</div>

<div class="demo05" style="background-image: url(/image/map-background.jpeg)">
    <p style=" text-align: center;font-size: 26px;font-family: 微软雅黑;color: #bb2222;padding-top: 50px;line-height: 200%">立刻预约运输服务</p>
    <p style=" text-align: center;font-size: 14px;font-family: 微软雅黑;color: #999999;padding-top: 25px;line-height: 200%;padding-left: 200px;padding-right: 200px">无论你的货物的较中目的地是什么，我们可以为您做得更好，致力于准时到达，甚至更快！多年来，我们公司的诚信为我们提供了可靠的信誉，具备了成熟的服务能力。准点发车、准时到达、保证低价、全程高速，安全、快速、送货及时</p>
    <a href="/page8" style="width: 150px;height: 50px;background-color: #bb2222;display: block;margin-left: 685px;margin-top: 50px;text-decoration: none">
        <span style="color: white;position: relative;top: 15px;left: 43px">立即预约</span></a>
</div>

<div class="demo06">
    <p style="text-align: center;font-family: 微软雅黑; font-size: 28px; color: #222222; line-height: 200%;padding-top: 30px">新闻中心</p>
    <p style="text-align: center;font-family: 微软雅黑; font-size: 12px; color: #999999; line-height: 200%;">我们拥有二十多年的货物运输代理经验，为您解决华南地区海运空运快递报关仓储等物流体系的一系列工作任务</p>
        <div  style="float: left;height: 532px; width: 33.333%;padding-top: 18px">
            <img style="padding-left: 51px;padding-top: 30px;height: 200px;width: 400px" src="${newsClasses.get(0).img}">
            <c:forEach items="${newsList1}" var="news">
                    <a style="font-family: 微软雅黑;font-size: 14px;padding-left: 50px;text-decoration: none;color: #222222;line-height: 200%" href="#">${news.name}</a>
                    <p style="font-size: 12px;font-family: 宋体;color: #999999;padding-left: 50px;line-height: 200%">${news.time}</p>
            </c:forEach>
        </div>
    <div  style="float: left;height: 532px; width: 33.333%;padding-top: 18px">
        <img style="padding-left: 51px;padding-top: 30px;height: 200px;width: 400px" src="${newsClasses.get(1).img}">
        <c:forEach items="${newsList2}" var="news">
            <a style="font-family: 微软雅黑;font-size: 14px;padding-left: 50px;text-decoration: none;color: #222222;line-height: 200%" href="#">${news.name}</a>
            <p style="font-size: 12px;font-family: 宋体;color: #999999;padding-left: 50px;line-height: 200%">${news.time}</p>
        </c:forEach>
    </div>
    <div  style="float: left;height: 532px; width: 33.333%;padding-top: 18px">
        <img style="padding-left: 51px;padding-top: 30px;height: 200px;width: 400px" src="${newsClasses.get(2).img}">
        <c:forEach items="${newsList3}" var="news">
            <a style="font-family: 微软雅黑;font-size: 14px;padding-left: 50px;text-decoration: none;color: #222222;line-height: 200%" href="#">${news.name}</a>
            <p style="font-size: 12px;font-family: 宋体;color: #999999;padding-left: 50px;line-height: 200%">${news.time}</p>
        </c:forEach>
    </div>

</div>

<div class="demo07">

    <div class="day16" style="float: left;height: 250px; width: 43%;background-color: #222222;">
        <p style="font-family: 微软雅黑;font-size: 20px;color: white;text-align: center;line-height: 200%;padding-top: 35px">某某国际物流有限公司</p>
        <p style="text-align: center;font-size: 12px;font-family: 微软雅黑;color: white">MARINE LOGISTICS CO LTD</p>
        <input class="search1" style="width: 250px; height: 40px;margin-top: 20px;margin-left: 180px;border-radius: 5px" type="text" value="请输入关键字">
        <button class="search2" style="width: 70px; height: 40px; background-color: red;color: white;font-family: 微软雅黑;border-radius: 5px">搜索</button>
        <p style="text-align: center;line-height: 200%;color: white;font-family: 微软雅黑;font-size: 10px;padding-top: 20px;padding-left: 50px;padding-right: 50px">某某国际物流有限公司是集代理、物流配送、航空速递、公路运输、铁路运输、仓储、城际配送于一体，跨区域、网络化、信息化、智能化、具有供应链管理能力的综合性物流公司</p>
    </div>

    <div class="day17" style="float: left;height: 250px; width: 30%;background-color: #222222">
        <p style="font-size: 13px;font-family: 微软雅黑;color: white;text-align: center;line-height: 200%;padding-top: 40px">联系方式</p>
        <p style="font-size: 20px;font-family: 微软雅黑;color: white;text-align: center;line-height: 200%">021-123456X</p>
        <p style="font-size: 13px;font-family: 微软雅黑;color: white;text-align: center;line-height: 200%">地址：上海市某某区某某路某某大厦x楼x号</p>
        <p style="font-size: 13px;font-family: 微软雅黑;color: white;text-align: center;line-height: 200%">邮箱：xxxxxx@126.com</p>
        <p style="font-size: 13px;font-family: 微软雅黑;color: white;text-align: center;line-height: 200%">手机123 xxxx xxxx</p>
        <p style="font-size: 13px;font-family: 微软雅黑;color: white;text-align: center;line-height: 200%">网址：www.xxxxxxxxx.com</p>
    </div>

    <div class="day18" style="float: left;height: 250px; width: 27%;background-color: #222222">
        <p style="font-size: 15px;font-family: 微软雅黑;color: white;text-align: center;line-height: 200%;padding-top: 40px;padding-right: 25px;">微信官方公众平台</p>
        <img style="width: 130px;height: 130px;padding-left: 135px;padding-top: 10px" src="image/5z08.jpeg">
    </div>
</div>

<div class="demo08">
    <p style="text-align: center;font-size: 12px;font-family: 微软雅黑;color: white;padding-top: 8px;">Copyright 20xx www.xxxxxxx.com All Right Reserved 版权所有 某某国际物流有限公司 网站备案：ICP备123456789XXX号</p>
</div>
</body>
</html>